<extend  name="Index/index" />
<block name="css1">
    <link rel="stylesheet" href="__PUBLIC__/mycss/user_info.css">
    <style type="text/css">
        body{background: #F0F4FB;}
    </style>
</block>
<block name="main">
<div class="container">
    <div class="row col-md-offset-4 col-md-4 mt60" >
        <h1 class="col-md-offset-3">注册</h1>
        <form class="form-horizontal mt20" method="post" action="<{:U('Login/insert')}>" onsubmit="return register()" id="form" name="form">
          
          <div class="form-group">
            <label for="user" class="col-md-2 control-label"></label>
            <div class="col-md-10">
              <input type="text" class="form-control" name="name" id="user" placeholder="用户名" onblur="checkUser()">
              <div id="uf"></div>
              <span style="color:#ccc">*用户名必须以字母开头,长度为6-12位!</span>
            </div>
          </div>

          <div class="form-group">
            <label for="phone" class="col-md-2 control-label"></label>
            <div class="col-md-10">
              <input type="text" name="phone" class="form-control" id="phone" placeholder="手机" onblur="checkPhone()">
              <div id="pf"></div>
              <span style="color:#ccc">*手机号码必须合法</span>
            </div>
          </div>

          <div class="form-group">
            <label for="pwd" class="col-md-2 control-label"></label>
            <div class="col-md-10">
              <input type="password" name="pwd" class="form-control" id="pwd" placeholder="密码" onblur="checkPass()">
              <div id="paf"></div>
              <span style="color:#ccc">*密码长度须为6-18位!</span>
            </div>
          </div>

          <div class="form-group">
            <label for="repwd" class="col-md-2 control-label"></label>
            <div class="col-md-10">
              <input type="password" name="repwd" class="form-control" id="repwd" placeholder="重复密码" onblur="checkRepass()">
              <div id="rpaf"></div>
              <span style="color:#ccc">*两次密码需相同</span>
            </div>
          </div>

          <div class="form-group">
            <div class="col-md-offset-3 col-md-9">
              <button type="submit" class="btn-lg btn-info">注册</button>
            </div>
          </div>
        </form>
    </div>
</div>

</block>

<block name="js">
    <script type="text/javascript">
        function checkUser(){
            var name = form.name.value;
            // console.log(name);
            if (name.match(/^[a-zA-Z]\w{5,12}$/) == null) {
                $('#uf').css('color','red').html('*用户名必须以字母开头,长度为6-12位!');
                return false;
            }else{
                $.ajax({
                    type:'post',
                    url:"<{:U('Login/checkRegister')}>",
                    data:'name='+name,
                    dataType:'json',
                    success:function(data){
                        // console.log(data);
                        if (data) {
                            $('#uf').css('color','green').html('√ 用户名可用!');
                            m = 1;
                        } else{
                            $('#uf').css('color','red').html('× 用户名已存在!');
                            m = 0;
                        }
                    },
                })
                if (m == 1) {
                    return true;
                } else{
                    return false;
                }
            }
        }

        function checkPhone(){
          var phone = form.phone.value;
            if (phone.match(/^1[^0129]\d{9}$/)==null) {
                $('#pf').css('color','red').html('× 手机号码必须合法!');
                return false;
            } else{
                $('#pf').css('color','green').html('√ 手机号码可用!');
                return true;
            }
        }

        function checkPass(){
          var pass = form.pwd.value;
          console.log(pass);
            if (pass.match(/^\w{6,18}$/)==null) {
                $('#paf').css('color','red').html('× 密码长度须为6-18位!');
                return false;
            } else{
                $('#paf').css('color','green').html('√ 密码合法!');
                return true;
            }
        }

        function checkRepass(){
          var pass = form.pwd.value;
          var Repass = form.repwd.value;
            if (Repass != pass) {
                $('#rpaf').css('color','red').html('× 两次密码不同!');
                return false;
            } else{
                $('#rpaf').css('color','green').html('√ 密码可用!');
                return true;
            }
        }

        function register(){
          // console.log(checkUser() && checkPhone() && checkPass() && checkRepass());
          if (checkUser() && checkPhone() && checkPass() && checkRepass()) {
            return true;
          } else{
            return false;
          }
        }
    </script>
</block>

 